<template>
  <div class="p-[10px]">
    <n-card title="账号信息" size="huge" hoverable class="mb-2">
      <div class="flex gap-[100px] text-4xl">
        <div>
          <div class="text-xl text-gray-500 mb-2">当前余额</div>
          ￥{{(userInfo.quota / 500000).toFixed(2)}}
        </div>
        <div>
          <div class="text-xl text-gray-500 mb-2">历史消耗</div>
          ￥{{(userInfo.used_quota / 500000).toFixed(2)}}
        </div>
        <div>
          <div class="text-xl text-gray-500 mb-2">请求次数</div>
          {{userInfo.request_count}}
        </div>
      </div>
    </n-card>
    <n-card title="我的套餐" size="huge" hoverable>
      <div class="flex justify-end gap-2 my-2">
        <n-input-group>
          <n-input size="large" :style="{ width: '40%' }" v-model:value="exchangeCode" placeholder="输入兑换码兑换" />
          <n-button ghost size="large" @click="exchange" :loading="exchangeLoading"> 立即兑换 </n-button>
        </n-input-group>
        <n-button type="primary" @click="showModel1 = true" size="large">
          <template #icon>
            <SvgIcon icon="prime:bitcoin" class="text-3xl"></SvgIcon>
          </template>
          选购套餐
        </n-button>
      </div>
      <!-- :render-cell="()=>{}" -->
      <n-data-table
        :columns="columns"
        :data="data"
        :bordered="false"
        :pagination="true"
      />
    </n-card>

    <!-- 套餐弹窗 -->
    <n-drawer v-model:show="showModel1" :width="500">
      <n-drawer-content title="选购套餐" closable>
        <div class="flex flex-wrap gap-2 justify-between">
          <Package v-for="item in packageList" :data="item" :key="item"/>
        </div>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script setup lang="ts">
import { SvgIcon } from "@/components/common";
import {
  NDataTable,
  NButton,
  NCard,
  NDrawer,
  NDrawerContent,
  NInputGroup,
  NInput,
  useMessage
} from "naive-ui";
import Package from "./components/package.vue";
import { ref, onMounted } from "vue";
import { fetchSelf, fetchTopup } from "@/api/index";

const message = useMessage();
const showModel1 = ref(false);
const packageList = ref([{
  amount: 0,
  title: '自定义'
},{
  amount: 1,
  title: '新手'
},{
  amount: 9,
  title: '普通会员'
},{
  amount: 99,
  title: '黄金会员'
},{
  amount: 199,
  title: '月度会员'
},{
  amount: 399,
  title: '年度会员'
}]);
const userInfo = ref<any>({});
const getUserInfo = async () => {
  const res = await fetchSelf();
  userInfo.value = res.data;
}

const exchangeCode = ref('');
const exchangeLoading = ref(false);
const exchange = async () => {
  try {
    if(!exchangeCode.value) return;
    exchangeLoading.value = true;
    await fetchTopup({key: exchangeCode.value});
    message.success('兑换成功')
    exchangeLoading.value = false
    exchangeCode.value = '';
    getUserInfo();
  } catch (error) {
    message.error((error as any).message)
    exchangeLoading.value = false
  }
}

const data = ref([]);
const columns = [
  {
    title: "套餐ID",
    key: "ID",
  },
  {
    title: "积分统计",
    key: "points",
  },
  {
    title: "上次重置时间",
    key: "reDate",
  },
  {
    title: "有效期",
    key: "date",
  },
];

onMounted(async() => {
  let data = await fetch("./config.json").then(e=>e.json());
  console.log(data)
  packageList.value = data.data
  getUserInfo();
  
});
</script>
